<template>
  <view>
    <view class="login-form-wrap">
      <view class="title">
        欢迎登录
      </view>
      <input v-model="tel" class="u-border-bottom" type="number" placeholder="请输入手机号">
      <input v-model="password" class="u-border-bottom my-40rpx" type="text" placeholder="请输入密码" password>
      <button class="login-btn" :style="[inputStyle]" @tap="submit">
        登录 <text class="i-mdi-login" />
      </button>

      <view class="alternative">
        <view class="password">
          密码登录
        </view>
        <view class="issue flex items-center">
          遇到问题 <text class="i-mdi-help" />
        </view>
      </view>
    </view>
    <view class="login-type-wrap">
      <view class="item wechat">
        <view class="icon">
          <u-icon size="35" name="weixin-fill" color="rgb(83,194,64)" />
        </view>
        微信
      </view>
      <view class="item QQ">
        <view class="icon">
          <u-icon size="35" name="qq-fill" color="rgb(17,183,233)" />
        </view>
        QQ
      </view>
    </view>
    <view class="hint">
      登录代表同意
      <text class="link">
        用户协议、隐私政策，
      </text>
      并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
    </view>
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';
import { HOME_PATH, isTabBarPath, LOGIN_PATH, removeQueryString } from '@/router';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const tel = ref<string>('17685754536');
const password = ref<string>('754536');
let redirect = HOME_PATH;

const inputStyle = computed<CSSProperties>(() => {
  const style = {} as CSSProperties;
  if (tel.value && password.value) {
    style.color = '#fff';
    style.backgroundColor = uni.$u.color.warning;
  }
  return style;
});
async function submit() {
  if (!uni.$u.test.mobile(Number(tel.value))) {
    uni.$u.toast('请输入正确的手机号');
    return;
  }
  if (!password.value) {
    uni.$u.toast('请输入密码');
    return;
  }
  
  try {
    uni.showLoading({
      title: '正在登录...'
    });
    
    // 调用真实的登录接口
    await userStore.login({ 
      phone: tel.value, 
      password: password.value 
    });
    
    uni.hideLoading();
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    
    setTimeout(() => {
      uni.$u.route({
        type: isTabBarPath(redirect) ? 'switchTab' : 'redirectTo',
        url: redirect,
      });
    }, 800);
  } catch (error: any) {
    uni.hideLoading();
    console.error('登录失败:', error);
    uni.showToast({
      title: error?.message || '登录失败',
      icon: 'error'
    });
  }
}

onLoad((options: any) => {
  if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
    redirect = decodeURIComponent(options.redirect);
  }
});
</script>

<style lang="scss" scoped>
.login-form-wrap {
  @apply mt-80rpx mx-auto mb-0 w-600rpx;

  .title {
    @apply mb-100rpx text-60rpx text-left font-500;
  }

  input {
    @apply pb-6rpx mb-10rpx text-left;
  }

  .tips {
    @apply mt-8rpx mb-60rpx;

    color: $u-info;
  }

  .login-btn {
    @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;

    color: $u-tips-color;

    &::after {
      @apply border-none;
    }
  }

  .alternative {
    @apply flex justify-between mt-30rpx;

    color: $u-tips-color;
  }
}

.login-type-wrap {
  @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;

  .item {
    @apply flex items-center flex-col text-28rpx;

    color: $u-content-color;
  }
}

.hint {
  @apply px-40rpx py-20rpx text-24rpx;

  color: $u-tips-color;

  .link {
    color: $u-warning;
  }
}
</style>
